<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        table{
            width: 100%;
            margin-bottom: 15px;
            border-collapse: collapse;
            table-layout: fixed;
        }
        th,td{
            border: 1px solid #CBD6DE;
            padding-left: 10px;
            line-height: 28px;
        }
        th{
            text-align: left;
            background: linear-gradient(#edf2f5,#dce9f2,#edf2f5);
            color:#467aa7;
        }
        tbody tr:nth-child(4n),tbody tr:nth-child(4n-1){
            background: #f2f2f2;
        }
        #pages{
            text-align: center;
            padding: 8px 0;
        }
        .page{
            min-width: 50px;
            display: inline-block;
        }
        .viewspotimg{
            width: 135px;
            height: 135px;
            margin-left: -10px;
            display: block;
            object-fit: cover;
        }
    </style>
</head>
<body>
<div id="app">
	<div id="wrap">
	    <div id="header">
	        <div style="float: right;padding-top: 24px">
	            <span style="margin-right: 10px;">
	                 <script type="text/javascript">
	                   var date = new Date();
	                   document.write("今天是：" + date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + " 星期" + "日一二三四五六".charAt(date.getDay()));
	                 </script>
	            </span>
	            <a href="../login.html" style="color:#fff;float: right">安全退出</a>
	        </div>
	        <h1>旅游信息管理系统</h1>
	    </div>
	    <div id="header-bar"></div>
	    <div id="content">
	        <h2>景点列表</h2>
	        <table>
	            <thead>
	            <tr>
	                <th width="14%">ID</th>
	                <th width="20%">景点</th>
	                <th width="12%">印象图</th>
	                <th width="16%">旺季时间</th>
	                <th width="10%">旺季门票</th>
	                <th width="10%">淡季门票</th>
	                <th width="18%">操作</th>
	            </tr>
	            </thead>
	            <tbody v-for="place in places">
	            <tr>
	                <td rowspan="2" v-text="place.id"></td>
	                <td rowspan="2" v-text="place.name"></td>
	                <td><img :src="'data:image/png;base64,'+place.picpath" class="viewspotimg"></td>
	                <td v-text="place.hottime">——</td>
	                <td v-text="place.hotticket">——</td>
	                <td v-text="place.dimticket">——</td>
	                <td style="text-align: center">
	                    <a href="javascript:;" @click="deletePlace(place.id)">删除景点</a><br>
	                    <a :href="'updateviewspot.html?id='+place.id">修改景点</a>
	                </td>
	            </tr>
	            <tr>
	                <td colspan="5">
	                    <div style="height: 56px;font-size: 14px;line-height: normal">
	                        <b style="color:#467aa7">简介：</b>
							<span v-text="place.placedes"></span>
	                    </div>
	                </td>
	            </tr>
	            </tbody>
	        </table>
	        <a :href="'addviewspot.html?provinceid='+id"><button type="button">添加景点</button></a>&emsp;
	        <a href="../province/provincelist.html">返回省份列表</a>
	        <div id="pages">
				<a href="javascript:;" class="page" v-if="page==1">&lt;上一页</a>
	            <a href="javascript:;" class="page" v-if="page!=1" @click="findAllPage(page-1)">&lt;上一页</a>
				
	            <a href="javascript:;" class="page" v-for="indexpage in totalPage" v-text="indexpage" @click="findAllPage(indexpage)"></a>
	            
	            <a href="javascript:;" class="page" v-if="page!=totalPage" @click="findAllPage(page+1)">下一页&gt;</a>
				<a href="javascript:;" class="page" v-if="page==totalPage">下一页&gt;</a>
	        </div>
	    </div>
	    <div id="footer">
	        ABC@126.com
	    </div>
	</div>
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
          places:{},
          page:1,
          rows:3,
          totalPage:0,
          totals:0,
		  id:"",
		  admin:''
           
        },
        methods:{
			findAllPage(indexpage){//查询所有
				if(indexpage){
					this.page = indexpage;
				}
			    _this = this;
			    axios.get("http://localhost:8080/place/allPlace?page="+this.page+"&size="+this.rows+"&provinceid="+this.id).then((res)=>{
			        console.log(res.data)
					_this.places = res.data.places;
					_this.totalPage = res.data.totalPage;
					_this.totals = res.data.totals;
			        
			    });
			},
			deletePlace(id){
				if(confirm("你确定要删除该景点吗？")){
					axios.get("http://localhost:8080/place/delete?id="+id).then((res)=>{
					    console.log(res.data)
						if(res.data.status){
							alert(res.data.msg);
							location.reload();
						}else{
							alert(res.data.msg);
						}
					});
				}
				
			}
        
        },
        created(){
			let id = location.href.substring(location.href.indexOf("=")+1);
			this.id = id;
			
			
				//this.username = localStorage.getItem("username");
			this.admin =JSON.parse(window.localStorage.getItem("access-admin"));
			if(!this.admin){
				window.location='../login.html';
			}else{
				//检验token合法性
				axios({
					url:'http://localhost:8080/user/checkToken',
					method:'get',
					headers:{
						token:this.admin.data.token
					}
				}).then((res) => {
					if(res.data.status){
						//展示数据
						 this.findAllPage();
					}else{
						//提示信息并返回登录页面
						alert(res.data.msg);
						location.href='../login.html'
					}
				})
			}
			
        }
    })
</script>